<template>
  <div id="app">
    <div class="layout">
      <Layout>
        <!-- 导航栏 -->
        <Nav></Nav>

        <!-- 内容 -->
        <Content :style="{ minHeight: '600px',margin: '10px 100px 0',background: '#f8f8f9'}">
          <!-- <router-view></router-view> -->
          <!-- 如果有keep alive 为 true ,则在在路由渲染时,滚动条移动到记录的位置 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </Content>
        <!-- 底部 -->
        <Footer :style="{ background: '#2e3031'}"></Footer>

      </Layout>
      <!-- 返回顶部 -->
      <GoBackToTop></GoBackToTop>
    </div>
  </div>
</template>

<script>
  // 引入公用布局
  import Nav from "./Components/Common/Nav";
  import GoBackToTop from "./Components/Common/GoBackToTop";
  import Footer from "./Components/Common/BottomFooter";
  export default {
    components: {
      Nav,
      GoBackToTop,
      Footer
    },

    //读取登录状态
    created() {
      console.log("app");
      this.$store.commit("loadToken");
    }
  };
</script>

<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #232527;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
</style>